<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" size="800px" destroy-on-close @closed="$emit('closed')">
		<div style="padding-left: 20px;padding-right: 20px">
			<el-form :model="form" label-width="120px" :rules="rules" ref="ruleForm" :disabled="mode=='show'">
				<el-form-item label="优惠券名称" prop="name">
					<el-input v-model="form.name" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="优惠券类型" prop="type">
					<el-radio :label="1" v-model="form.type">满减券</el-radio>
					<el-radio :label="2" v-model="form.type">折扣券</el-radio>
				</el-form-item>
				<el-form-item label="优惠券面额" prop="amount" v-if="form.type == 1">
					<el-input v-model="form.amount" style="width: 500px" type="number"></el-input> 元
				</el-form-item>
				<el-form-item label="优惠折扣" prop="discount" v-if="form.type == 2">
					<el-input v-model="form.discount" style="width: 500px" type="number" placeholder="例如：0.8 或者 0.95"></el-input>
				</el-form-item>
				<el-form-item label="最多优惠" prop="max_discount_amount" v-if="form.type == 2">
					<el-input v-model="form.max_discount_amount" style="width: 500px" type="number"></el-input> 元 <span style="color:#F56C6C">(数值大于0则为设置有效)</span>
				</el-form-item>
				<el-form-item label="发放数量限制" prop="is_limit_num">
					<el-radio :label="1" v-model="form.is_limit_num">限量</el-radio>
					<el-radio :label="2" v-model="form.is_limit_num">不限量</el-radio>
				</el-form-item>
				<el-form-item label="发放数量" v-if="form.is_limit_num == 1">
					<el-input v-model="form.total_num" style="width: 500px" type="number"></el-input>
				</el-form-item>
				<el-form-item label="最多领取数量" prop="max_receive_num">
					<el-input v-model="form.max_receive_num" style="width: 500px" type="number"></el-input>
				</el-form-item>
				<el-form-item label="使用门槛" prop="is_threshold">
					<el-radio :label="1" v-model="form.is_threshold">有门槛</el-radio>
					<el-radio :label="2" v-model="form.is_threshold">无门槛</el-radio>
				</el-form-item>
				<el-form-item label="订单满" v-if="form.is_threshold == 1">
					<el-input v-model="form.threshold_amount" style="width: 500px" type="number"></el-input> 元可以使用
				</el-form-item>
				<el-form-item label="有效期类型" prop="validity_type">
					<el-radio :label="1" v-model="form.validity_type">固定时间</el-radio>
					<el-radio :label="2" v-model="form.validity_type">领取之日起</el-radio>
				</el-form-item>
				<el-form-item label="有效期至" v-if="form.validity_type == 1">
					<div style="width: 500px;">
						<el-date-picker
							style="width: 100%"
							v-model="form.datetime_range"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="YYYY-MM-DD HH:mm:ss">
						</el-date-picker>
					</div>
				</el-form-item>
				<el-form-item label="领取之日起" v-if="form.validity_type == 2">
					<el-input v-model="form.receive_useful_day" style="width: 500px" type="number"></el-input> 天内有效
				</el-form-item>
				<el-form-item label="活动商品" prop="join_goods">
					<el-radio :label="1" v-model="form.join_goods">全部商品参与</el-radio>
					<el-radio :label="2" v-model="form.join_goods">指定商品参与</el-radio>
				</el-form-item>
				<el-form-item label="活动商品" v-if="form.join_goods == 2">
					<el-button type="primary" icon="el-icon-plus" size="small" @click="selectGoods">选择商品</el-button>
					<el-table
						:data="selectedGoods"
						style="width: 100%">
						<el-table-column
							prop="id"
							label="ID">
						</el-table-column>
						<el-table-column
							prop="name"
							:show-overflow-tooltip="true"
							width="400px"
							label="商品名">
						</el-table-column>
						<el-table-column
							prop="price"
							label="价格">
						</el-table-column>
						<el-table-column
							fixed="right"
							label="操作">
							<template #default="scope">
								<el-button @click="handleDel(scope.$index)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="optSubmit('ruleForm')" :loading="loading">立即创建</el-button>
			</div>
		</template>
	</el-drawer>

	<el-dialog
		class="goods-select"
		title=""
		v-model="goodsDialogVisible"
		width="1200px">
		<goods-select @selected-goods="handleSelectedGoods" @close-dialog="goodsDialogVisible=false"></goods-select>
	</el-dialog>
</template>

<script>
import GoodsSelect from "@/components/goodsSelect/index.vue";

export default {
	components: {
		GoodsSelect
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增优惠券',
				edit: '编辑优惠券',
				show: '查看'
			},
			selectedGoods: [],
			form: {
				name: '',
				type: 1,
				discount: 0,
				amount: 0,
				max_discount_amount: -1,
				is_limit_num: 1,
				total_num: 0,
				max_receive_num: 0,
				is_threshold: 1,
				threshold_amount: 0,
				validity_type: 1,
				datetime_range: "",
				join_goods: 1,
				receive_useful_day: 7,
				selectedGoods: []
			},
			rules: {
				name: [
					{required: true, message: '请输入优惠券名称', trigger: 'blur'}
				],
				type: [
					{required: true, message: '请选择优惠券类型', trigger: 'blur'}
				],
				amount: [
					{required: true, message: '请输入优惠券面额', trigger: 'blur'}
				],
				is_limit_num: [
					{required: true, message: '请输入发放数量限制', trigger: 'blur'}
				],
				max_receive_num: [
					{required: true, message: '请输入最多领取张数', trigger: 'blur'}
				],
				is_threshold: [
					{required: true, message: '请输入使用门槛', trigger: 'blur'}
				],
				validity_type: [
					{required: true, message: '请输入有效期类型', trigger: 'blur'}
				],
				join_goods: [
					{required: true, message: '请输入活动商品', trigger: 'blur'}
				],
				discount: [
					{required: true, message: '请输入折扣', trigger: 'blur'}
				]
			},
			visible: false,
			loading: false,
			goodsDialogVisible: false
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单提交方法
		optSubmit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.loading = true
					let res = await this.$API.coupon.add.post(this.form)
					this.loading = false
					if (res.code == 0) {
						this.$message.success(res.msg)
						this.$emit('success')
					} else {
						this.$message.error(res.msg)
					}
				} else {
					return false;
				}
			})
		},
		// 设置选择的商品
		async getSelGoods(id) {
			let res = await this.$API.coupon.couponGoods.get({id: id})
			this.selectedGoods = res.data
		},
		// 表单注入数据
		setData(row) {

			this.getSelGoods(row.id)

			this.form = row
			this.form.datetime_range = [row.start_time, row.end_time]
		},
		// 选择的商品
		handleSelectedGoods(goods) {
			goods.forEach(item => {
				if (this.form.selectedGoods.indexOf(item.id) == -1) {
					this.selectedGoods.push(item)
					this.form.selectedGoods.push(item.id)
				}
			})
			this.goodsDialogVisible = false
		},
		// 选择商品
		selectGoods() {
			this.goodsDialogVisible = true
		},
		// 删除关联商品
		handleDel(index) {
			this.selectedGoods.splice(index, 1)
		},
	}
}
</script>

<style scoped>

</style>
